/**
 * Author: zhjpaul
 * Description: 主入口文件，用于界面的呈现以及事件的绑定
 */

/**
 * 全局变量
 */

// 当前编辑的交换机端口
var $gEditNode;

// 所有交换机端口信息（端口id，端口名，端口alias，是否为tap口）
var gPhyPortsStatus;

// 所有LAG端口信息（端口id，端口名，端口alias，聚合的物理端口）
var gLAGPortsStatus;

// 所有流表项信息
var gFlowEntries = {};

// 记录所有的TAP端口
var gTapPorts = [
    {
        value: 0,
        text: '无'
    }
];

// others (to fix bug)
var portIndex;

// 用于获取实时流量的参数信息
var realTimeInterval,
    realTimeCount = 0,
    realTimeFlowID;

/**
 * 在页面上渲染交换机视图，主要动态生成端口视图
 * 
 * @return {void}
 */

function renderSwitch() {

    getPhyPortsStatus(renderSwitchPhyPort, attachEventForPort);

}

/**
 * 在页面上渲染视图端口
 * 
 * @param  {Number}   index     端口编号
 * @param  {Boolean}  isTap     是否为TAP口
 * @param  {String}   portName  端口名
 * @return {void}
 */

function renderSwitchPhyPort(index, isTap, portName) {

    var hintClass = (index % 2 == 1) ? 'hint--bottom ' : 'hint--top ';
    var tapClass = isTap ? 'tap-port' : '';

    var node = '<span class="node ' + hintClass + tapClass +  '"' + 
                    'aria-label="' + portName + '"' + 
                    'data-index="' + index + '">' + 
               '</span>';

    $("#topo").append(node);

}

/**
 * 呈现LAG端口信息
 * 
 * @return {void}
 */

function showLAGPort() {

    getLAGPortsStatus();

}

/**
 * 呈现表格中一行LAG端口的信息
 * 
 * @param  {Array} lagInfo 一个LAG端口的信息
 * @return {void}
 */

function renderLAG(lagInfo) {

    var tr = '<tr>' +
                '<td>' + lagInfo['lag_port_id'] + '</td>' +
                '<td>' + lagInfo['lag_port_alias'] + '</td>' + 
                '<td>' + lagInfo['include_ports'].join(',') + '</td>' + 
                '<td>' + 
                    '<button class="modify btn btn-success" data-toggle="modal" data-target="#LAGModal">修改</button>' + 
                    '<button class="delete btn btn-danger">删除</button>' + 
                '</td>' + 
             '</tr>';

    $('#lag-info tbody').append(tr);

    // 为<修改>按钮添加事件
    $('#lag-info tbody tr').last().find('.modify').click(function (ev) {

        ev.preventDefault();

        var tds = $(this).parent().parent().children();
        
        // 填充原有数据到modal框的form中
        $("#lag-details .lag-port-id").val(tds.eq(0).text());
        $("#lag-details .lag-port-name").val(tds.eq(1).text());
        $("#lag-details .lag-ports").val(tds.eq(2).text());

        $("#lag-details .confirm").click(function (ev) {

            ev.preventDefault();
            ev.stopImmediatePropagation();

            // 获取此LAG的信息
            var lagInfo = {
                'lag_port_id': $("#lag-details .lag-port-id").val(),
                'lag_port_alias': $("#lag-details .lag-port-name").val(),
                'include_ports': $("#lag-details .lag-ports").val().split(',')
            };

            tds.eq(0).text(lagInfo['lag_port_id']);
            tds.eq(1).text(lagInfo['lag_port_alias']);
            tds.eq(2).text(lagInfo['include_ports'].join(','));

            // TODO: 可否修改id，如果修改了可能会有什么问题？
            updateLAGPortStatus(lagInfo);
            
            $("#LAGModal button.close").click();
        
        });

        $("#lag-details .cancel").click(function (ev) {

            ev.preventDefault();
            $("#LAGModal button.close").click();
        
        });
    
    });

    // 为<删除>按钮添加事件
    $('#lag-info tbody tr').last().find('.delete').click(function (ev) {
        
        ev.preventDefault();

        var tds = $(this).parent().parent().children();
        var lagInfo = {
            'lag_port_id': tds.eq(0).text(),
            'include_ports': []
        };

        updateLAGPortStatus(lagInfo);
        $(this).parent().parent().remove();
    });
}

/**
 * 呈现所有流表项信息
 * 
 * @return {void}
 */

function showFlowEntries() {

    /*
    var flowEntriesData = [
        {
            'flow_id': 1,
            'in_port': 1, 
            'actions': [
                'output:1'
            ]
        }  
    ];

    for (var i = 0, len = flowEntriesData.length; i < len; i++) {
        renderFlowEntry(flowEntriesData[i]);
    }
    */
    getFlowEntries();

}

/**
 * 渲染一条流表项的信息
 * 
 * @param  {Array} flowEntry 一条流表项信息
 * @return {void}
 */

function renderFlowEntry(flowEntry) {

    var tr = '<tr>' +
                '<td>' + flowEntry['flow_id'] + '</td>' +
                '<td>' + flowEntry['match_fields'] + '</td>' +
                '<td>' + flowEntry['actions'] + '</td>' +
                '<td>' + 
                    '<button class="realtime-traffic btn btn-primary" data-toggle="modal" data-target="#RTTModal">实时流量</button>' + 
                    '<button class="modify btn btn-success" data-toggle="modal" data-target="#FlowEntryModal">修改</button>' + 
                    '<button class="delete btn btn-danger">删除</button>' + 
                '</td>' + 
             '</tr>';
 
    $('#flow-table tbody').append(tr);

    // 为<实时流量>按钮添加事件
    $('#flow-table tbody tr').last().find('.realtime-traffic').click(function (ev) {

        var tds = $(this).parent().parent().children();
        realTimeFlowID = Number(tds.eq(0).text());
        console.log(realTimeFlowID);
        getRealTimeTraffic({
            "target_flow_id": Number(tds.eq(0).text()),
            "first_request": true
        });

        realTimeInterval = setInterval(function () {

            realTimeCount++;
            getRealTimeTraffic({
                "target_flow_id": realTimeFlowID,
                "first_request": false
            });

            console.log("realTimeCount ", realTimeCount);

            if (realTimeCount >= CONFIG.REALTIME_TRAFFIC_NUM) {
                console.log("finish");
                realTimeCount = 0;
                clearInterval(realTimeInterval);
            }

        }, CONFIG.REALTIME_INTERVAL);

        //var data = [37.0, 36.9, 39.5, 44.5, 48.2, 41.5, 45.2, 46.5, 43.3, 48.3, 43.9, 49.6];
        //drawLineChart(data);
    });

    // 为<修改>按钮添加事件
    $('#flow-table tbody tr').last().find('.modify').click(function (ev) {

        ev.preventDefault();
        
        var tds = $(this).parent().parent().children(),
            flowEntry = gFlowEntries[tds.eq(0).text()];

        /*
        // 在Modal页面上呈现出已有的内容
        $("#flow-entry-details .flow-id").val(flowEntry['flow_id']);
        $("#flow-entry-details .flow-in-port").val(flowEntry['in_port']);
        $("#flow-entry-details .flow-dl-src").val(flowEntry['dl_src']);
        $("#flow-entry-details .flow-nw-src").val(flowEntry['nw_src']);
        $("#flow-entry-details .flow-tp-src").val(flowEntry['tp_src']);
        $("#flow-entry-details .flow-dl-dst").val(flowEntry['dl_dst']);
        $("#flow-entry-details .flow-nw-dst").val(flowEntry['nw_dst']);
        $("#flow-entry-details .flow-tp-dst").val(flowEntry['tp_dst']);
        $("#flow-entry-details .flow-dl-vlan").val(flowEntry['dl_vlan']);
        $("#flow-entry-details .flow-dl-proto").val(flowEntry['dl_proto']);
        $("#flow-entry-details .flow-nw-proto").val(flowEntry['nw_proto']);
        $("#flow-entry-details .flow-nw-tos").val(flowEntry['nw_tos']);
        $("#flow-entry-details .flow-actions").val(flowEntry['actions'].join(','));
        */

        // 在Modal页面上呈现出已有的内容
        $("#flow-entry-details .flow-id").val(flowEntry['flow_id']);
        $("#flow-entry-details .flow-match-fields").val(flowEntry["match_fields"])
        $("#flow-entry-details .flow-actions").val(flowEntry['actions']);

        // TODO
        $("#flow-entry-details .confirm").click(function (ev) {
            
            ev.preventDefault();
            ev.stopImmediatePropagation();

            /*
            // 更新全局flowEntry变量的信息
            flowEntry['flow_id'] = $("#flow-entry-details .flow-id").val();
            flowEntry['in_port'] = $("#flow-entry-details .flow-in-port").val();
            flowEntry['dl_src'] = $("#flow-entry-details .flow-dl-src").val();
            flowEntry['nw_src'] = $("#flow-entry-details .flow-nw-src").val();
            flowEntry['tp_src'] = $("#flow-entry-details .flow-tp-src").val();
            flowEntry['dl_dst'] = $("#flow-entry-details .flow-dl-dst").val();
            flowEntry['nw_dst'] = $("#flow-entry-details .flow-nw-dst").val();
            flowEntry['tp_dst'] = $("#flow-entry-details .flow-tp-dst").val();
            flowEntry['dl_vlan'] = $("#flow-entry-details .flow-dl-vlan").val();
            flowEntry['dl_proto'] = $("#flow-entry-details .flow-dl-proto").val();
            flowEntry['nw_proto'] = $("#flow-entry-details .flow-nw-proto").val();
            flowEntry['nw_tos'] = $("#flow-entry-details .flow-nw-tos").val();
            flowEntry['actions'] = $("#flow-entry-details .flow-actions").val().split(',');
            */

            // 更新全局flowEntry变量的信息
            flowEntry['flow_id'] = $("#flow-entry-details .flow-id").val();
            flowEntry['match_fields'] = $("#flow-entry-details .flow-match-fields").val();
            flowEntry['actions'] = $("#flow-entry-details .flow-actions").val();

            // 更新界面中的流表项内容
            tds.eq(0).text(flowEntry['flow_id']);
            tds.eq(1).text(flowEntry['match_fields']);
            tds.eq(2).text(flowEntry['actions']);

            modifyFlowEntry(flowEntry);

            $("#FlowEntryModal button.close").click();
        
        });

        $("#flow-entry-details .cancel").click(function (ev) {
            ev.preventDefault();
            $("#FlowEntryModal button.close").click();
        });

    });

    // 为<删除>按钮添加事件
    $('#flow-table tbody tr').last().find('.delete').click(function (ev) {
        
        var flowID = {
            'target_flow_id': $(this).parent().parent().children().eq(0).text()
        };
        
        deleteFlowEntry(flowID);

        $(this).parent().parent().remove();

    });

}

/**
 * 呈现所有组表信息
 * 
 * @return {void}
 */

function showGroupTable() {

    getGroupTables();

}

/**
 * 渲染一条组表的信息
 * 
 * @param  {Array} groupTableInfo 一条组表信息
 * @return {void}
 */

function renderGroupTable(groupTableInfo) {

    var tr = '<tr>' +
                '<td>' + groupTableInfo['group_id'] + '</td>' +
                '<td>' + groupTableInfo['type'] + '</td>' + 
                '<td>' + groupTableInfo['bucket'].join(',') + '</td>' + 
                '<td>' + 
                    '<button class="modify btn btn-success" data-toggle="modal" data-target="#GroupTableModal">修改</button>' + 
                    '<button class="delete btn btn-danger">删除</button>' + 
                '</td>' + 
             '</tr>';

    $('#group-table-info tbody').append(tr);

    // 为<修改>按钮添加事件
    $('#group-table-info tbody tr').last().find('.modify').click(function (ev) {

        ev.preventDefault();

        var tds = $(this).parent().parent().children();
        
        // 填充原有数据到modal框的form中
        $("#group-table-details .group-id").val(tds.eq(0).text());
        $("#group-table-details .group-type").val(tds.eq(1).text());
        $("#group-table-details .group-buckets").val(tds.eq(2).text());

        $("#group-table-details .confirm").click(function (ev) {

            ev.preventDefault();
            ev.stopImmediatePropagation();

            // 获取此GroupTable的信息
            var groupTableInfo = {
                'target_group_id': $("#group-table-details .group-id").val(),
                'type': $("#group-table-details .group-type").val(),
                'bucket': $("#group-table-details .group-buckets").val().split(',')
            };

            tds.eq(0).text(groupTableInfo['target_group_id']);
            tds.eq(1).text(groupTableInfo['type']);
            tds.eq(2).text(groupTableInfo['bucket'].join(','));

            // TODO: 可否修改id，如果修改了可能会有什么问题？
            modifyGroupTable(groupTableInfo);
            
            $("#GroupTableModal button.close").click();
        
        });

        $("#lag-details .cancel").click(function (ev) {

            ev.preventDefault();
            $("#GroupTableModal button.close").click();
        
        });
    
    });

    // 为<删除>按钮添加事件
    $('#group-table-info tbody tr').last().find('.delete').click(function (ev) {
        
        ev.preventDefault();

        var tds = $(this).parent().parent().children();
        var groupID = {
            'target_group_id': tds.eq(0).text(),
        };

        deleteGroupTable(groupID);
        $(this).parent().parent().remove();
    });

}

/**
 * 呈现所有逻辑组信息
 * 
 * @return {void}
 */

function showLogicGroup() {

    getLogicGroups();

}

/**
 * 渲染一条逻辑组端口信息
 * 
 * @param  {Object}  logicGroupInfo 一条逻辑组信息
 * @return {void}
 */

function renderLogicGroup(logicGroupInfo) {

    var tr = '<tr>' +
                '<td>' + logicGroupInfo['logic_group_id'] + '</td>' +
                // alias or name? (3.2)
                '<td>' + logicGroupInfo['logic_group_alias'] + '</td>' + 
                '<td>' + logicGroupInfo['include_ports'].join(',') + '</td>' + 
                '<td>' + 
                    '<button class="modify btn btn-success" data-toggle="modal" data-target="#LogicGroupModal">修改</button>' + 
                    '<button class="delete btn btn-danger">删除</button>' + 
                '</td>' + 
             '</tr>';

    $('#logic-group-info tbody').append(tr);

    // 为<修改>按钮添加事件
    $('#logic-group-info tbody tr').last().find('.modify').click(function (ev) {

        ev.preventDefault();

        var tds = $(this).parent().parent().children();
        
        // 填充原有数据到modal框的form中
        $("#logic-group-details .logic-group-id").val(tds.eq(0).text());
        $("#logic-group-details .logic-group-name").val(tds.eq(1).text());
        $("#logic-group-details .logic-group-ports").val(tds.eq(2).text());

        $("#logic-group-details .confirm").click(function (ev) {

            ev.preventDefault();
            ev.stopImmediatePropagation();

            // 获取此GroupTable的信息
            var logicGroupInfo = {
                'logic_group_id': $("#logic-group-details .logic-group-id").val(),
                'logic_group_alias': $("#logic-group-details .logic-group-name").val(),
                'include_ports': $("#logic-group-details .logic-group-ports").val().split(',')
            };

            tds.eq(0).text(logicGroupInfo['logic_group_id']);
            tds.eq(1).text(logicGroupInfo['logic_group_alias']);
            tds.eq(2).text(logicGroupInfo['include_ports'].join(','));

            // 修改Logic Group，与删除Logic Group共用一个Restful API
            updateLogicGroup(logicGroupInfo);
            
            $("#LogicGroupModal button.close").click();
        
        });

        $("#logic-group-details .cancel").click(function (ev) {

            ev.preventDefault();
            $("#LogicGroupModal button.close").click();
        
        });
    
    });

    // 为<删除>按钮添加事件
    $('#logic-group-info tbody tr').last().find('.delete').click(function (ev) {
        
        ev.preventDefault();

        var tds = $(this).parent().parent().children();
        var groupID = {
            'logic_group_id': tds.eq(0).text(),
            'include_ports': []
        };
        
        // 修改Logic Group，与删除Logic Group共用一个Restful API
        updateLogicGroup(groupID);

        $(this).parent().parent().remove();
    });

}

/**
 * 绑定交换机端的单击双击时间
 * 
 * @return {void}
 */

function attachEventForPort() {

    // 单击事件，用于显示端口流量信息
    $(".node").click(function () {
        $(".node").removeClass("my-focus");
        $(this).addClass("my-focus");
    });

    // 双击事件，用于修改端口的alias以及设置端口是否为tap口
    $(".node").dblclick(function () {

        // 记录当前编辑的端口节点
        $gEditNode = $(this);
        portIndex = parseInt($gEditNode.data("index"));

        // 显示已有的端口alias以及是否为TAP口信息
        $("#changeAlias input").val($gEditNode.attr("aria-label"));

        if (gPhyPortsStatus[portIndex]['phy_tap_flag'] == 1) {

            $("#changeAlias .switch").data("toggle", "on");
            var html = '<div class="switch-container switch-container-on">' + 
                           '<span class="switch-left switch-left-on">ON</span>' + 
                           '<span class="switch-circle switch-circle-on"></span>' + 
                           '<span class="switch-right switch-right-on">OFF</span>' +
                       '</div>';
            $("#changeAlias .switch").html(html);
        
        } else {
        
            $("#changeAlias .switch").data("toggle", "off");
            var html = '<div class="switch-container switch-container-off">' + 
                           '<span class="switch-left switch-left-off">ON</span>' + 
                           '<span class="switch-circle switch-circle-off"></span>' + 
                           '<span class="switch-right switch-right-off">OFF</span>' +
                       '</div>';
            $("#changeAlias .switch").html(html);
        
        }

        // !!! Make sure other forms will disapper
        $("#flow-entry").hide();
        $("#lag-port").hide();
        $("#group-table").hide();
        $("#logic-group").hide();
        $("#controller").hide();
        $("#changeAlias").show();

        // for confirm button
        $("#changeAlias .confirm").click(function (ev) {

            ev.preventDefault();
            ev.stopImmediatePropagation();

            $("#changeAlias").hide();

            var portAlias = $("#changeAlias input").val(),
                isTap = $("#changeAlias .switch").data("toggle") == 'on' ? true : false;

            $gEditNode.attr("aria-label", portAlias);
            gPhyPortsStatus[portIndex]['phy_port_alias'] = portAlias;
            gPhyPortsStatus[portIndex]['phy_tap_flag'] = ($("#changeAlias .switch").data("toggle") == 'on' ? 1 : 0);

            // 向后台发送数据更新此端口信息
            updatePhyPortStatus(gPhyPortsStatus[portIndex]);

        });

        // for cancel button
        $("#changeAlias .cancel").click(function (ev) {
          ev.preventDefault();
          $("#changeAlias").hide();
        });
    });
}

/**
 * 用于显示/隐藏交换机端口编辑界面
 * 
 * @return {void}
 */

function attachEventForSwitch() {

    $("#changeAlias .switch").click(function () {

        if ($(this).data("toggle") === 'on') {

            $("#changeAlias .switch-container").removeClass("switch-container-on").addClass("switch-container-off");
            $("#changeAlias .switch-left").removeClass("switch-left-on").addClass("switch-left-off");
            $("#changeAlias .switch-circle").removeClass("switch-circle-on").addClass("switch-circle-off");
            $("#changeAlias .switch-right").removeClass("switch-right-on").addClass("switch-right-off");
            $(this).data("toggle", "off");
        
        } else {

            $("#changeAlias .switch-container").removeClass("switch-container-off").addClass("switch-container-on");
            $("#changeAlias .switch-left").removeClass("switch-left-off").addClass("switch-left-on");
            $("#changeAlias .switch-circle").removeClass("switch-circle-off").addClass("switch-circle-on");
            $("#changeAlias .switch-right").removeClass("switch-right-off").addClass("switch-right-on");
            $(this).data("toggle", "on");
        
        }   

    });
}

/**
 * 设置两种主要操作，一是添加交换机流表项，二是配置控制器，三是添加组表，四是配置控制器
 * 
 * @return {void}
 */

function attachEventForOperation() {

    $("#add-flow-entry").click(function () {     
        $("#changeAlias").hide();
        $("#lag-port").hide();
        $("#group-table").hide();
        $("#logic-group").hide();
        $("#controller").hide();
        $("#flow-entry").show();
    });

    $("#add-lag-port").click(function () {
       $("#changeAlias").hide();
       $("#flow-entry").hide();
       $("#group-table").hide();
       $("#logic-group").hide();
       $("#controller").hide();
       $("#lag-port").show();
    });

    $("#add-group-table").click(function () {
        $("#changeAlias").hide();
        $("#flow-entry").hide();
        $("#lag-port").hide();
        $("#logic-group").hide();
        $("#controller").hide();
        $("#group-table").show();
    });

    $("#add-logic-group").click(function () {
        $("#changeAlias").hide();
        $("#flow-entry").hide();
        $("#lag-port").hide();
        $("#group-table").hide();
        $("#controller").hide();
        $("#logic-group").show();
    }); 

    $("#config-controller").click(function () {
        $("#changeAlias").hide();
        $("#flow-entry").hide();
        $("#lag-port").hide();
        $("#group-table").hide();
        $("#logic-group").hide();
        $("#controller").show();
    });

    attachEventForAddFlowEntry();
    attachEventForAddLAGPort();
    attachEventForGroupTable();
    attachEventForLogicGroup();
    attachEventForController();

}

/**
 * 添加流表项
 * 
 * @return {void}
 */

function attachEventForAddFlowEntry() {


    $("#RTTModal button.close").click(function (ev) {

        clearInterval(realTimeInterval);
        realTimeCount = 0;
        $('#RTTModal .modal-body').html("");

    });

    $("#flow-entry .confirm").click(function (ev) {
        
        ev.preventDefault();

        var matchFields = [];

        if ($("#priority").val()) {
            matchFields.push('priority=' + $("#priority").val());
        }
        if ($("#in-port").val()) {
            matchFields.push('in_port=' + $("#in-port").val());
        }
        if ($("#nw_src").val()) {
            matchFields.push('nw_src=' + $("#nw_src").val());
        }
        if ($("#tp_src").val()) {
            matchFields.push('tp_src=' + $("#tp_src").val());
        }
        if ($("#nw_dst").val()) {
            matchFields.push('nw_dst=' + $("#nw_dst").val());
        }
        if ($("#tp_dst").val()) {
            matchFields.push('tp_dst=' + $("#tp_dst").val());
        }
        if ($("#nw_proto").val()) {
            matchFields.push($("#nw_proto").val());
        }
        if ($("#dl_vlan").val()) {
            matchFields.push("dl_vlan=" + $("#dl_vlan").val());
        }

        /*
        // 获取流表项数据
        var flowEntry = {
            'in_port': $("#in-port").val(),
            'priority': $("#priority").val(),
            'nw_src': $("#nw_src").val(),
            'tp_src': $("#tp_src").val(),
            'nw_dst': $("#nw_dst").val(),
            'tp_dst': $("#tp_dst").val(),
            'nw_proto': $("#nw_proto").val(),
            'dl_vlan': $("#dl_vlan").val(),
            'actions': $("#actions").val()
        };
        */

        // 是选择了More选项，如果选择了的话获取More中的数据
        if ($("#flow-entry #more").css("display") != 'none') {
            /*
            flowEntry['dl_type'] = $("#dl_type").val();
            flowEntry['dl_src'] = $("#dl_src").val();
            flowEntry['dl_dst'] = $("#dl_dst").val();
            flowEntry['nw_tos'] = $("#nw_tos").val();
            */
            if ($("#dl_type").val()) {
                matchFields.push($("#dl_type").val());
            }
            if ($("#dl_src").val()) {
                matchFields.push("dl_src=" + $("#dl_src").val());
            }
            if ($("#dl_dst").val()) {
                matchFields.push("dl_dst=" + $("#dl_dst").val());
            }
            if ($("#nw_tos").val()) {
                matchFields.push("nw_tos=" + $("#nw_tos").val());
            }
        }

        var flowEntry = {
            'in_port': $("#in-port").val(),
            'match_fields': matchFields.join(','),
            'actions': $("#actions").val()
        };
        
        $("#flow-entry .more").show();
        $("#flow-entry #more").hide();

        // 通过Restful API添加流表项
        addFlowEntry(flowEntry);

        // 隐藏表单及清除填充的数据
        $("#flow-entry").hide();
        clearFlowEntryInput();

    });

    $("#flow-entry .cancel").click(function (ev) {

        ev.preventDefault();

        $("#flow-entry .more").show();
        $("#flow-entry #more").hide();

        // 隐藏表单及清除填充的数据
        $("#flow-entry").hide();
        clearFlowEntryInput();

    });

    $("#flow-entry .more").click(function (ev) {

        ev.preventDefault();

        $(this).hide();
        $("#flow-entry #more").show();
    
    });

}

/**
 * 清除流表项表单中填充的数据
 * 
 * @return {void}
 */

function clearFlowEntryInput() {

    $("#in-port").val('');
    $("#priority").val('');
    $("#nw_src").val('');
    $("#tp_src").val('');
    $("#nw_dst").val('');
    $("#tp_dst").val('');
    $("#nw_proto").val('');
    $("#dl_vlan").val('');
    $("#actions").val('');
    $("#dl_type").val('');
    $("#dl_src").val('');
    $("#dl_dst").val('');
    $("#nw_tos").val('');

}

/**
 * 添加LAG端口
 * 
 * @return {void}
 */
function attachEventForAddLAGPort() {

    $("#lag-port .confirm").click(function (ev) {

        ev.preventDefault();

        var lagInfo = {
            'lag_port_id': $("#lag-id").val(),
            'lag_port_alias': $("#lag-alias").val(),
            'include_ports': $("#lag-ports").val().split(',')
        };

        // restful api
        updateLAGPortStatus(lagInfo);

        // 在页面中渲染此LAG信息
        renderLAG(lagInfo);

        // 隐藏表单以及清空输入内容
        $("#lag-port").hide();
        clearLAGInput();

    });

    $("#lag-port .cancel").click(function (ev) {

        ev.preventDefault();

        // 隐藏表单以及清空输入内容
        $("#lag-port").hide();
        clearLAGInput();

    });
}

/**
 * 清空LAG设置的输入内容
 * 
 * @return {void}
 */
function clearLAGInput() {

    $("#lag-id").val('');
    $("#lag-alias").val('');
    $("#lag-ports").val('');

}

/**
 * 添加组表
 * 
 * @return {void}
 */

function attachEventForGroupTable() {

    $("#group-table .confirm").click(function (ev) {

        ev.preventDefault();

        var groupTableInfo = {
            'group_id': $("#group-id").val(),
            'type': $("#group-type").val(),
            'bucket': $("#group-buckets").val().split(',')
        };

        addGroupTable(groupTableInfo);

        $("#group-table").hide();
        clearGroupTableInput();

    });

    $("#group-table .cancel").click(function (ev) {

        ev.preventDefault();
        $("#group-table").hide();
        clearGroupTableInput();      

    });

}

/**
 * 清除组表表单中用户输入的内容
 * 
 * @return {void}
 */

function clearGroupTableInput() {

    $("#group-id").val('');
    $("#group-type").val('');
    $("#group-buckets").val('');

}

/**
 * 添加逻辑组
 * 
 * @return {void}
 */

function attachEventForLogicGroup() {

    $("#logic-group .confirm").click(function (ev) {

        ev.preventDefault();

        var logicGroupInfo = {
            'logic_group_id': $("#logic-group-id").val(),
            'logic_group_alias': $("#logic-group-name").val(),
            'include_ports': $("#logic-group-ports").val().split(',')
        };
 
        // restful API
        updateLogicGroup(logicGroupInfo);
        renderLogicGroup(logicGroupInfo);

        $("#logic-group").hide();
        clearLogicGroupInput();

    });

    $("#logic-group .cancel").click(function (ev) {

        ev.preventDefault();
        $("#logic-group").hide();
        clearLogicGroupInput();      

    });

}

/**
 * 清除逻辑组表单中用户输入的内容
 * 
 * @return {void}
 */

function clearLogicGroupInput() {

    $("#logic-group-id").val('');
    $("#logic-group-name").val('');
    $("#logic-group-ports").val('');

}

/**
 * 配置控制器信息
 * 
 * @return {void}
 */

function attachEventForController() {

    $("#controller .confirm").click(function (ev) {
        
        ev.preventDefault();

        var controllerInfo = {
            'controller_name': $("#ctrl-name").val(), 
            'controller_ip': $("#ctrl-ip").val(),
            'controller_port': parseInt($("#ctrl-port").val())
        };

        // 通过Restful API配置控制器地址
        configController(controllerInfo);

        $("#controller").hide();
        clearControllerInput();

    });

    $("#controller .cancel").click(function (ev) {

        ev.preventDefault();
        $("#controller").hide();
        clearControllerInput();
    
    });

}

/**
 * 清除控制器配置中的用户输入内容
 * 
 * @return {void}
 */

function clearControllerInput() {

    $("#ctrl-ip").val("");
    $("#ctrl-port").val("");

}

/**
 * 用于切换流量呈现的饼图/表格视图
 * 
 * @return {void}
 */

function attachEventForTabs() {

    $(".my-nav-tabs li").click(function () {
        $('.my-nav-tabs li').removeClass("my-active");
        $(this).addClass("my-active");
        $(".my-nav-tabs-div div").removeClass("my-non-active");
        $($(this).data("div")).siblings().addClass("my-non-active");
    });
}

/**
 * 为页面上的各类元素添加事件及其回调函数
 * 
 * @return {void}
 */

function attachEvent() {

    attachEventForSwitch();
    attachEventForOperation();
    attachEventForTabs();
    // attachEventForTAGInfo();
    // attachEventForFlowEntries();

}

/**
 * 程序主入口，当页面加载完成之后执行相应的js函数
 * 
 * @return {void}
 */

$(document).ready(function () {

    // 创建交换机视图
    renderSwitch();

    // 呈现端口的流量信息，为了获取到端口Alias，这部分放到请求了端口信息之后处理
    // showPortTraffic(0);

    // 呈现LAG端口信息
    showLAGPort();

    // 呈现流表项信息
    showFlowEntries();

    // 呈现组表信息
    showGroupTable();

    // 呈现逻辑组信息
    showLogicGroup();

    // 给界面中的各个部分绑定事件
    attachEvent();

});